<template>
	<pageFramework>
		<view class="content">
			<view class="title">
				<uni-icons custom-prefix="iconfont" type="icon-shezhi" color="#ffffff" size="20"></uni-icons>
				<text class="titleText"> {{$t('Page.user.sz')}} </text>
			</view>
			<tabsMenu v-model="menuCurrent" :menuList="menuList" @change="clickMenu">
				<template v-if="menuCurrent === 0">
					<general></general>
				</template>
				<template v-if="menuCurrent === 1">
					<bankAccount></bankAccount>
				</template>
				<template v-if="menuCurrent === 2">
					<security></security>
				</template>
			</tabsMenu>
		</view>
	</pageFramework>
</template>

<script>
	import general from './components/general'
	import bankAccount from './components/bankAccount'
	import security from './components/security'

	export default {
		components: {
			general,
			bankAccount,
			security
		},
		data() {
			return {
				menuCurrent: 0,
				menuList: [{
					name: this.$t('Page.user.zd'),
				}, {
					name: this.$t('Page.user.yhzh'),
				}, {
					name: this.$t('Page.user.aq'),
				}]
			}
		},
		methods: {
			clickMenu(item, index) {
				console.log(this.menuCurrent)
			},
		}
	}
</script>

<style lang="less" scoped>
	.content {
		color: #fff;
		padding: 16px 32px;
		max-width: 1200px;
		margin: 0 auto;

		.title {
			font-weight: 700;
			font-size: 1.25rem;
			margin: 16px 0;

			.titleText {
				margin-left: 10px;
			}
		}
	}

	@media screen and (max-width: 768px) {
		.main {
			flex-direction: column;
		}
	}
</style>